<template>
  <div class="main-box">
    <div class="table-box">
      <div class="card mb10 pt0 pb0">
        <SelectFilter :data="selectFilterData" :default-values="selectFilterValues" @change="changeSelectFilter" />
      </div>
      <ProTable
        ref="proTable"
        title="调拨单列表"
        highlight-current-row
        :columns="columns"
        :request-api="getTransferOrderList"
        :init-param="Object.assign(treeFilterValues, selectFilterValues)"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出调拨单数据</el-button>
        </template>
        <!-- 单选 -->
        <template #radio="scope">
          <el-radio :label="scope.row.id" v-model="radio"><i></i></el-radio>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" v-if="scope.row.transferStatus === 0" link :icon="View" @click="transferOrderEdit(scope.row)"
            >调拨</el-button
          >
          <el-button
            v-if="scope.row.transferStatus === 1"
            type="primary"
            link
            :icon="View"
            @click="transferOrderDetail(scope.row)"
            >查看详情</el-button
          >
          <el-button
            v-if="scope.row.transferStatus === 2"
            type="primary"
            link
            :icon="View"
            @click="transferOrderDetail(scope.row)"
            >查看详情</el-button
          >
        </template>
      </ProTable>
      <DetailDrawer ref="detailRef" />
      <EditDrawer ref="editRef" />
      <ImportExcel ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="tsx" name="useSelectFilter">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import SelectFilter from "@/components/SelectFilter/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Download, View } from "@element-plus/icons-vue";
import { getTransferOrderList, getTransferOrder } from "@/api/modules/transferOrder";
import { TransferOrder } from "@/api/interface";
import { transferOrderType } from "@/utils/serviceDict";
import { transferStatus } from "@/utils/serviceDict";
import DetailDrawer from "./components/DetailDrawer.vue";
import EditDrawer from "./components/EditDrawer.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 单选
const radio = ref("");

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "transferOrderId", label: "单号", width: 80, search: { el: "input" }, sortable: true },
  // { prop: "orderItems[0].goodsName", label: "商品名称", width: 120 },
  // { prop: "customInfo.customName", label: "客户姓名", width: 120 },
  // { prop: "customInfo.customPhone", label: "客户电话", width: 150 },
  {
    prop: "transferType",
    label: "调拨类型",
    width: 150,
    sortable: true,
    search: { el: "input" },
    tag: true,
    enum: transferOrderType
  },
  { prop: "transferStatus", label: "调拨单状态", width: 180, sortable: true, tag: true, enum: transferStatus },
  { prop: "taskId", label: "关联任务单", width: 120 },
  // { prop: "courierInfo.courierName", label: "配送员姓名", width: 120 },
  // { prop: "paymentTotal", label: "支付总额", width: 120 },
  // {
  //   prop: "createTime",
  //   label: "创建时间",
  //   width: 200,
  //   search: {
  //     el: "date-picker",
  //     span: 2,
  //     props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
  //     defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
  //   }
  // },
  {
    prop: "expOutboundTime",
    label: "计划出库时间",
    width: 200
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: 200
  },
  { prop: "operation", label: "操作", fixed: "right" }
];

// selectFilter 数据
const selectFilterData = reactive([
  {
    title: "调度状态(单)",
    key: "transferStatus",
    options: [
      {
        label: "全部",
        value: -1
      },
      {
        label: "待调度",
        value: 0,
        icon: "Box"
      },
      {
        label: "已调度",
        value: 1,
        icon: "SoldOut"
      },
      {
        label: "挂起",
        value: 2,
        icon: "Box"
      }
    ]
  }
]);

// 初始化方法，挂载之后执行的东西填到里面
onMounted(() => {});

const treeFilterValues = reactive({});

// 默认 selectFilter 参数
const selectFilterValues = ref({ transferStatus: -1 });
const changeSelectFilter = (value: typeof selectFilterValues.value) => {
  ElMessage.success("筛选成功 🤔");
  proTable.value!.pageable.current = 1;
  selectFilterValues.value = value;
};

// 导出任务单列表
const downloadFile = async () => {
  // ElMessageBox.confirm("确认导出数据?", "温馨提示", { type: "warning" }).then(() =>
  //   // useDownload(exportUserInfo, "任务单列表", proTable.value?.searchParam)
  // );
};

const transferOrderDetail = (row: TransferOrder.ResTransferOrderList) => {
  openDetailDrawer(row);
};

const detailRef = ref<InstanceType<typeof DetailDrawer> | null>(null);
const openDetailDrawer = (row: Partial<TransferOrder.ResTransferOrderList> = {}) => {
  const params = {
    title: "调拨单详情",
    isView: true,
    row: { ...row },
    getTableList: proTable.value?.getTableList
  };
  detailRef.value?.acceptParams(params);
};

const transferOrderEdit = (row: TransferOrder.ResTransferOrderList) => {
  openEditDrawer(row);
};

const editRef = ref<InstanceType<typeof EditDrawer> | null>(null);
const openEditDrawer = (row: Partial<TransferOrder.ResTransferOrderList> = {}) => {
  const params = {
    title: "调拨单详情",
    isView: true,
    api: getTransferOrder,
    row: { ...row },
    getTableList: proTable.value?.getTableList
  };
  editRef.value?.acceptParams(params);
};
</script>
